<template>
  <div class="header">
    <div class="wrapper">
      <div class="wrapper-left">
        <router-link to="/" class="logo">
          <img src="../assets/logo.png" alt="" class="logo-pic" />
          <div class="logo-title">腾讯问卷</div>
        </router-link>
        <div class="wrapper-option">
          <router-link to="/guide" class="link title-font">创建问卷</router-link>
          <router-link to="/mine" class="link title-font">我的问卷</router-link>
          <router-link to="/answer-group" class="link title-font">回答小组</router-link>

          <!-- <div class="title-box preposs">
            <router-link to="/guide" class="title-font">创建问卷</router-link>
          </div>
          <div class="title-box">
            <a href="" class="title-font">我的问卷</a>
          </div>
          <div class="title-box">
            <a href="" class="title-font">回答小组</a>
          </div>
          <div class="title-box">
            <a href="" class="title-font">调查咨询</a>
          </div>
          <div class="title-box">
            <a href="" class="title-font">帮助中心</a>
          </div> -->
        </div>
      </div>
      <div class="wrapper-right">
        <div class="bell-box">
          <img src="../assets/bell.png" alt="" class="bell-pic" />
        </div>
        <div class="user-msg">
          <div class="head-box">
            <img src="../assets/headpic.jpg" alt="" class="head-pic" />
          </div>
          <span class="uesr-name">霡霂淋漓</span>
        </div>
        <span class="user-cut">|</span>
        <a href="" class="user-exit">退出</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 980px;
  width: 100%;
  background-color: white;
  z-index: 99999;
}
.wrapper {
  height: 60px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper-left {
  display: flex;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  width: 121px;
  height: 60px;
  // background-color: blanchedalmond;
}
.logo-pic {
  width: 32px;
  vertical-align: middle;
  margin-right: 5px;
  border: 0;
  cursor: pointer;
}
@font-face {
  font-family: txlogo;
  src: url('../assets/logo.ttf');
}
.logo-title {
  font-family: txlogo;
  font-size: 21px;
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  vertical-align: middle;
  // color: #333;
  cursor: pointer;
}
.logo-title:hover{
  content: "";
  color:blue;
}
.wrapper-option {
  // background-color: aquamarine;
  width: 540px;
  height: 60px;
  // position: absolute;
  top: 0;
  left: 200px;
  font-size: 17px;
  display: flex;
  align-items: center;
  margin-left: 50px;
}
.title-box {
  height: 60px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  // background-color: chartreuse;
  position: relative;
}

.link {
  position: relative;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  margin-left: 50px;
}

.link.router-link-exact-active::after,
.link:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: gold;
}

.title-box:hover::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 68px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.preposs {
  margin-left: 0;
}
.title-font {
  font-size: 17px;
  text-decoration: none;
}
.title-font:hover{
  content:"";
  color: blue;
}
.wrapper-right {
  width: 175px;
  height: 60px;
  display: flex;
  align-items: center;
  // background-color: grey;
}
.bell-box {
  display: flex;
  align-items: center;
  // cursor: pointer;
  width: 40;
  height: 60px;
  // background-color: lightblue;
}
.bell-pic {
  width: 20px;
  height: 20px;
  border-radius: initial;
  margin-right: 20px;
  cursor: pointer;
}
.user-msg {
  display: flex;
  align-items: center;
}
.head-box {
  width: 25px;
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}
.head-pic {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}
.user-name {
  display: inline-block;
  width: 56px;
  height: 60px;
  font-size: 14px;
  vertical-align: top;
  white-space: nowrap;
}
.user-cut{
  margin: 0 2px;
}
.user-exit{
  text-decoration: none;

}
.user-exit:hover{
  color: blue;
}
</style>
